    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>查看购买记录</title>

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- Font Awesome -->
        <link href="css/font-awesome.min.css" rel="stylesheet">
        <!-- NProgress -->
        <!-- Custom Theme Style -->
        <link href="css/custom.min.css" rel="stylesheet">
    </head>

    <body class="nav-md">
    <div class="container body">
        <div class="main_container">
            <div id="head">
            </div>

            <!-- top navigation -->

            <!-- /top navigation -->

            <!-- page content -->
            <div class="right_col" role="main">
                <select id="sel">
                    <option value="01">1月</option>
                    <option value="02">2月</option>
                    <option value="03">3月</option>
                    <option value="04">4月</option>
                    <option value="05">5月</option>
                    <option value="06">6月</option>
                </select>
                <div id="main" style="width: 600px;height:400px; float: left"></div>
                <!-- /page content -->

                <!-- footer content -->
                <div id="myTabContent" class="tab-content">
                    <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
                        <p>
                        <table class="table table-striped" style="float: left">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>姓名</th>
                                <th>销量</th>
                            </tr>
                            </thead>
                            <tbody id="myadd">

                            </tbody>
                        </table>

                        </p>
                    </div>
                </div>
                <!-- /footer content -->
            </div>

        </div>
    </div>
        <!-- jQuery -->
        <script src="js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="js/bootstrap.min.js"></script>
        <!-- FastClick -->
        <script src="js/fastclick.js"></script>
        <!-- NProgress -->
        <script src="js/nprogress.js"></script>
        <!-- validator -->
        <script src="js/validator.js"></script>
        <script src="js/echarts.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    $(document).ready(function(){
        $("#head").load("head.html");
    });

    // 指定图表的配置项和数据
    var $token=window.sessionStorage.getItem('token');
    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "http://localhost:8081/OrderController/echarts",    //请求发送到TestServlet处
        data : {"token":$token},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
                $("#myadd tr").remove();
                var names=[];    //类别数组（实际用来盛放X轴坐标值）
                var nums=[];    //销量数组（实际用来盛放Y坐标值）
                for(var i=0;i<result.length;i++){
                    names.push(result[i].sname);    //挨个取出类别并填入类别数组
                }
                for(var i=0;i<result.length;i++){
                    nums.push(result[i].ocount);    //挨个取出销量并填入销量数组
                }
                for (var i = 0; i < result.length; i++) {
                    $("#myadd").append("<tr><td>" + (i+1)+ "</td><td>" + result[i].sname+ "</td><td>" + result[i].ocount+"</td></tr>");
                }
                var option = {
                    title: {
                        text: '订单成交数量'
                    },
                    tooltip: {},
                    legend: {
                        data:['数量']
                    },
                    xAxis: {
                        data: names
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: nums
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })

    $(document).on("change","#sel",function () {
        var $time=$(this).val();
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "http://localhost:8081/OrderController/echarts",    //请求发送到TestServlet处
            data : {"token":$token,"finshtime":$time},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                var names=[];    //类别数组（实际用来盛放X轴坐标值）
                var nums=[];    //销量数组（实际用来盛放Y坐标值）
                var names1=[];    //类别数组（实际用来盛放X轴坐标值）
                var nums2=[];    //销量数组（实际用来盛放Y坐标值）
                $("#myadd tr").remove();
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for(var i=0;i<result.length;i++){
                        names.push(result[i].sname);    //挨个取出类别并填入类别数组
                    }
                    for(var i=0;i<result.length;i++){
                        nums.push(result[i].ocount);    //挨个取出销量并填入销量数组
                    }
                    for (var i = 0; i < result.length; i++) {
                        $("#myadd").append("<tr><td>" + (i+1)+ "</td><td>" + result[i].sname+ "</td><td>" + result[i].ocount+"</td></tr>");
                    }
                    var option = {
                        title: {
                            text: '订单成交数量'
                        },
                        tooltip: {},
                        legend: {
                            data:['数量']
                        },
                        xAxis: {
                            data: names
                        },
                        yAxis: {},
                        series: [{
                            name: '数量',
                            type: 'bar',
                            data: nums
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })
    })

</script>
</body>
</html>
